<template>
  <div class="pages">
    <!-- 头部导航 -->
		<div class="header animate__fadeInDown">
			<button class="back-button fff" @click="router.back()">
				<span class="back-icon">←</span>
			</button>
			<span class="header-title fff">弹幕问题记录</span>
		</div>
    <div class="list-pages">
      <div class="list animate__fadeInUp" v-if="store.history.length > 0">
        <div class="item" v-for="(item, index) in store.history" :key="index">
          <div class="time">{{item.timestamp}}</div>
          <div class="question">
            <div class="icon"></div>
            <div class="text">{{item.val}}</div>
          </div>
          <div class="message">{{item.response}}</div>
        </div>
      </div>
      <div class="empty" v-else>
        暂无弹幕记录
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from '@/stores/data'
const router = useRouter()
const store = useStore()
// 定义数据
const list = ref([]);

// 模拟数据加载
onMounted(() => {
  // 这里可以添加实际的数据获取逻辑
  // 示例数据
  list.value = [
    { content: '这是一条弹幕内容', reply: '这是回复内容' },
    { content: '第二条弹幕', reply: '第二条回复' }
  ];
});
</script>

<style lang="scss" scoped>
:deep(body) {
  background: #006CFF;
  box-sizing: border-box;
}

.list-pages {
  padding: 22px 16px; // 38rpx 28rpx
  box-sizing: border-box;
  width: 100%;
  border-radius: 20px 20px 0 0; // 35rpx 35rpx 0 0
  background: #F6FAFF;
  flex: 1;
}

.empty {
  width: 100%;
  height: 100vh;
  text-align: center;
  box-sizing: border-box;
  padding-top: 57px; // 100rpx
}

.item {
  width: 100%;
  background: #FFFFFF;
  border-radius: 10px; // 17rpx
  padding: 12px 16px 16px 16px; // 21rpx 28rpx 28rpx 28rpx
  box-sizing: border-box;
  margin-bottom: 16px; // 28rpx
  
  .time {
    font-family: PingFang SC, PingFang SC;
    font-size: 12px; // 21rpx
    color: #666666;
    margin-bottom: 10px; // 17rpx
  }
  
  .question {
    display: flex;
    align-items: center;
    margin-bottom: 8px; // 14rpx
    
    .icon {
      width: 17px; // 30rpx
      height: 17px; // 30rpx
      background: url(@/assets/images/question.png);
      background-size: 100% 100%;
      margin-right: 7px; // 12rpx
      box-sizing: border-box;
    }
    
    .text {
      font-size: 14px; // 24rpx
      color: #00042D;
    }
  }
  
  .message {
    width: 100%;
    background: #F2F6FF;
    border-radius: 8px; // 14rpx
    padding: 11px 10px 9px 10px; // 19rpx 17rpx 16rpx 17rpx
    font-size: 14px; // 24rpx
    color: #525468;
    box-sizing: border-box;
  }
}
</style>